Arbeitsweise

Mit Kitty und KI arbeiten

Kitty verbindet ein Website-Kit mit einem geführten KI-Kontext. Du beschreibst dein Ziel in normalen Worten; die KI fragt nach, empfiehlt sinnvolle Entscheidungen und hält fest, was ihr gemeinsam beschlossen habt.

Schritt für Schritt

Vom Ziel zur fertigen Seite

01

Beschreibe dein Ziel

In normalen Worten: „Ich brauche eine Website für eine Physiotherapie mit Leistungen, Team und Kontaktmöglichkeit.“

02

Kitty klärt und merkt sich

Die KI stellt nur die nächsten sinnvollen Fragen und hält Antworten, offene Punkte und Entscheidungen im Projektgedächtnis fest.

03

Umsetzung im System

Die KI nutzt Tokens, Templates und Bausteine und liefert nachvollziehbare HTML-, CSS- und JavaScript-Dateien.

So klingt das

Beispiel-Prompts

Kopiervorlagen — je konkreter, desto besser das Ergebnis.

„Erstelle eine neue Seite leistungen.html nach dem Kitty-System — Seitentitel, ein Feature-Grid mit 6 Leistungen und ein CTA-Band unten.“

„Ändere die Signalfarbe auf ein warmes Orange und mach die Sektionsabstände etwas luftiger — nur über die Tokens.“

„Füge dem Footer eine vierte Spalte mit Öffnungszeiten hinzu und schalte den Cookie-Banner ein, weil wir Google Maps einbetten.“

„Bau die Startseite als Boxed-Layout statt Full-Width und häng einen Sticky-Header dran.“

Eingebaut

Woran Kitty dich erinnert

Datenschutz-Basis

Schrift bleibt selbst gehostet, Consent nur bei Bedarf — mit echtem Prior-Blocking. Kein heimliches Nachladen.

Barrierefreiheit

Kitty weist auf Überschriften, Alt-Texte, sichtbaren Fokus, Kontrast und Reduced Motion hin. Bewusste Abweichungen bleiben möglich.

Konsistenz

Neue Abstände laufen über die Token-Skala, neue Sektionen über Templates. Nichts wird hart reingeschrieben.

Fragen

Kurz erklärt

Brauche ich einen Server?
Nein. Die Seiten laufen per Doppelklick lokal und auf jedem Webspace. Nur das PHP-Kontaktformular braucht einen Server mit PHP — ohne PHP ersetzt du es durch einen mailto:-Link.
Wie ändere ich Farbe, Schrift oder Abstände?
Über die Tokens in styles.css (:root). Sag Kitty einfach, was du willst — die Änderung passiert an einer Stelle, nicht in jedem Baustein.
Wie füge ich eine neue Seite hinzu?
Eine bestehende Seite oder ein Template aus templates/ als Vorlage nehmen, Inhalte tauschen, dieselbe styles.css verlinken. Header und Footer werden pro Seite dupliziert (reines Static, kein Build).
Ist die Website damit automatisch DSGVO-konform?
Die technischen Bausteine sind darauf ausgelegt (lokale Schrift, Prior-Blocking, abgesichertes Formular). Die inhaltliche und rechtliche Korrektheit — Datenschutzerklärung, Consent-Kategorien — bleibt deine Verantwortung.

Weiterstöbern

Schau dir die Bausteine an.

Zum Styleguide Dokumentation